{% extends 'backend/base.html' %}
{% load static %}

{% block Primary %}
    <div class="section p-0">
        <div class="card-header p-4">

            <div class="row g-3">

                <!-- product filter -->
                <div class="order-2 order-md-1 col">
                    <form method="get" class="position-relative d-flex align-items-center">

                        <!-- search icon -->
                        <svg class="z-index-1 position-absolute start-0 ms-3 text-primary" width="18px" height="18px"
                             xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                             stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <circle cx="11" cy="11" r="8"></circle>
                            <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
                        </svg>

                        <div class="dropdown w-100">
                            <input type="text"
                                   class="dropdown-toggle form-control form-control-sm border-0 shadow-none ps-5 bg-gray-100"
                                   data-bs-toggle="dropdown" data-bs-auto-close="outside"
                                   placeholder="Product title / SKU">

                            <!--
                              .dropdown-mega-sm
                              .dropdown-mega-md
                              .dropdown-mega-lg
                              .dropdown-mega-xl
                            -->
                            <div class="dropdown-menu dropdown-mega-lg shadow-lg p-4 mt-1">
                                <h6 class="mb-4">Filter products</h6>

                                <div class="row g-3 mb-3">
                                    <div class="col-lg-6">

                                        <div class="form-floating mb-3">
                                            <select class="form-select" id="filter-category" aria-label="Category">
                                                <option value="" selected>Any</option>
                                                <option value="1">Shoes</option>
                                                <option value="2">Men tshirt</option>
                                                <option value="3">Women thisrt</option>
                                            </select>
                                            <label for="filter-category">Category</label>
                                        </div>

                                    </div>
                                    <div class="col-lg-6">

                                        <div class="form-floating mb-3">
                                            <select class="form-select" id="filter-brand" aria-label="Brand">
                                                <option value="" selected>Any</option>
                                                <option value="1">Nike</option>
                                                <option value="2">Adidas</option>
                                                <option value="3">Loreal</option>
                                            </select>
                                            <label for="filter-brand">Brand</label>
                                        </div>

                                    </div>
                                </div>

                                <div class="mb-3">
                                    <div class="form-check d-block d-sm-inline-block me-2 mb-2">
                                        <input class="form-check-input form-check-input-primary" type="checkbox"
                                               value="1" id="filter-saleprice">
                                        <label class="form-check-label user-select-none" for="filter-saleprice">
                                            Sale price
                                        </label>
                                    </div>

                                    <div class="form-check d-block d-sm-inline-block me-2 mb-2">
                                        <input class="form-check-input form-check-input-primary" type="checkbox"
                                               value="1" id="filter-preorder">
                                        <label class="form-check-label user-select-none" for="filter-preorder">
                                            Allow preorders
                                        </label>
                                    </div>
                                </div>

                                <div class="d-flex justify-content-between mt-4">
                                    <button type="submit" class="btn btn-sm btn-primary">Apply filter</button>
                                    <a href="#!" class="btn btn-sm btn-danger btn-soft float-end">Reset</a>
                                </div>

                            </div>
                        </div>

                    </form>
                </div>

                <!-- options -->
                <div class="order-1 order-md-2 col-md-auto">
                    <div class="btn-group w-100" role="group" aria-label="Product options">
                        <a href="#!" role="button" class="btn btn-sm small btn-secondary">Import</a>
                        <a href="#!" role="button" class="btn btn-sm small btn-secondary">Export</a>
                    </div>
                </div>

            </div>

            <!-- active filters -->
            <ul class="list-inline mt-2 mb-0">
                <li class="list-inline-item badge bg-primary me-1">
                    <a href="#!" class="text-white text-decoration-none d-flex align-items-center">
                        <svg width="18px" height="18px" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"
                             fill="currentColor">
                            <path fill-rule="evenodd"
                                  d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"></path>
                        </svg>
                        <span class="text-white ms-1">Filters:</span>
                    </a>
                </li>
                <li class="list-inline-item me-1">
                    <a href="#!" class="badge bg-light link-muted d-inline-grid gap-auto-1">
                        <svg width="18px" height="18px" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"
                             fill="currentColor">
                            <path fill-rule="evenodd"
                                  d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"></path>
                        </svg>
                        <span class="text-muted">Category</span>
                    </a>
                </li>
                <li class="list-inline-item me-1">
                    <a href="#!" class="badge bg-light link-muted d-inline-grid gap-auto-1">
                        <svg width="18px" height="18px" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"
                             fill="currentColor">
                            <path fill-rule="evenodd"
                                  d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"></path>
                        </svg>
                        <span class="text-muted">Brand</span>
                    </a>
                </li>
                <li class="list-inline-item me-1">
                    <a href="#!" class="badge bg-light link-muted d-inline-grid gap-auto-1">
                        <svg width="18px" height="18px" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"
                             fill="currentColor">
                            <path fill-rule="evenodd"
                                  d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"></path>
                        </svg>
                        <span class="text-muted">Sale</span>
                    </a>
                </li>
                <li class="list-inline-item me-1">
                    <a href="#!" class="badge bg-light link-muted d-inline-grid gap-auto-1">
                        <svg width="18px" height="18px" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"
                             fill="currentColor">
                            <path fill-rule="evenodd"
                                  d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"></path>
                        </svg>
                        <span class="text-muted">Preorder</span>
                    </a>
                </li>
            </ul>

        </div>

        <div class="card-body pt-1">

            <!-- item list -->
            <div class="table-responsive-md">

                <table class="table table-align-middle" role="grid" aria-describedby="mobile-page-info">
                    <thead>
                    <tr>
                        <th scope="col" style="width:46px">
                            <div class="form-check"><!-- check all -->
                                <input data-checkall-container="#checkall-list" class="form-check-input" type="checkbox"
                                       value="1">
                            </div>
                        </th>
                        <th scope="col" class="small text-muted">序号</th>
                        <th scope="col" class="small text-muted">名称</th>
                        <th scope="col" class="small text-muted">图标</th>
                        <th scope="col" class="small text-muted">颜色</th>
                        <th scope="col" class="small text-muted text-center">
                            <a href="#!" class="d-flex link-muted" title="order by inventory"
                               aria-label="order by inventory">
                          <span class="d-flex flex-column lh-1">
                            <svg class="lh-1 text-primary" width="13px" height="13px" xmlns="http://www.w3.org/2000/svg"
                                 fill="none" viewBox="0 0 24 24" stroke="currentColor">
                              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M5 15l7-7 7 7"></path>
                            </svg>

                            <svg class="lh-1 mt-n1 text-muted" width="13px" height="13px"
                                 xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                 stroke="currentColor">
                              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M19 9l-7 7-7-7"></path>
                            </svg>
                          </span>
                                <span class="ms-2">排序</span>
                            </a>
                        </th>
                        <th scope="col" class="small text-muted">
                            <a href="#!" class="d-flex link-muted" title="order by price" aria-label="order by price">
                          <span class="d-flex flex-column lh-1">
                            <svg class="lh-1 text-primary" width="13px" height="13px" xmlns="http://www.w3.org/2000/svg"
                                 fill="none" viewBox="0 0 24 24" stroke="currentColor">
                              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M5 15l7-7 7 7"></path>
                            </svg>

                            <svg class="lh-1 mt-n1 text-muted" width="13px" height="13px"
                                 xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                 stroke="currentColor">
                              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M19 9l-7 7-7-7"></path>
                            </svg>
                          </span>
                                <span class="ms-2">类型</span>
                            </a>
                        </th>
                        <th scope="col" class="small text-muted"><!-- options --></th>
                    </tr>
                    </thead>
                    <tbody id="checkall-list">
                    <!-- item -->
                    {% for paycategory in paycategories %}
                        <tr>
                            <th scope="row"><!-- check -->
                                <div class="form-check"><!-- item -->
                                    <input class="form-check-input form-check-input-primary" type="checkbox" value="">
                                </div>
                            </th>
                            <td>
                                {{ forloop.counter }}
                            </td>
                            <td>
                                {{ paycategory.name }}
                            </td>
                            <td>
                                {{ paycategory.name }}
                            </td>
                            <td>
                                {{ paycategory.color }}
                            </td>
                            <td>
                                {{ paycategory.sort }}
                            </td>
                            <td>
                                {{ paycategory.pay_type }}
                            </td>
                            <td class="dropstart"><!-- options -->
                                <a class="btn btn-sm btn-light btn-icon btn-ghost text-muted rounded-circle dropdown-toggle"
                                   href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false"
                                   data-bs-offset="0,0">
                                  <span class="group-icon">
                                    <svg height="18px" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"
                                         fill="currentColor"><path fill-rule="evenodd"
                                                                   d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z"></path></svg>
                                    <svg xmlns="http://www.w3.org/2000/svg" width="18px" height="18px"
                                         viewBox="0 0 24 24"
                                         fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                         stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6"
                                                                                                                  y1="6"
                                                                                                                  x2="18"
                                                                                                                  y2="18"></line></svg>
                                  </span>
                                </a>
                                <ul class="dropdown-menu dropdown-menu-clean">
                                    <li>
                                        <a class="dropdown-item" href="#">
                                            <svg class="text-muted" width="18px" height="18px"
                                                 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"
                                                 stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                                 stroke-linejoin="round">
                                                <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
                                                <circle cx="12" cy="12" r="3"></circle>
                                            </svg>
                                            <span>Preview</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a class="dropdown-item" href="#">
                                            <svg class="text-muted" width="18px" height="18px"
                                                 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"
                                                 stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                                 stroke-linejoin="round">
                                                <path d="M12 20h9"></path>
                                                <path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"></path>
                                            </svg>
                                            <span>Edit</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a class="dropdown-item" href="#">
                                            <svg class="text-muted" width="18px" height="18px"
                                                 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"
                                                 stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                                 stroke-linejoin="round">
                                                <polyline points="20 6 9 17 4 12"></polyline>
                                            </svg>
                                            <span>Set active</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a class="dropdown-item" href="#">
                                            <svg class="text-muted" width="18px" height="18px"
                                                 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"
                                                 stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                                 stroke-linejoin="round">
                                                <line x1="18" y1="6" x2="6" y2="18"></line>
                                                <line x1="6" y1="6" x2="18" y2="18"></line>
                                            </svg>
                                            <span>Set inactive</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a class="dropdown-item" href="#">
                                            <svg class="text-muted" width="18px" height="18px"
                                                 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"
                                                 stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                                 stroke-linejoin="round">
                                                <circle cx="12" cy="12" r="10"></circle>
                                                <line x1="15" y1="9" x2="9" y2="15"></line>
                                                <line x1="9" y1="9" x2="15" y2="15"></line>
                                            </svg>
                                            <span>Set unavailable</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a class="dropdown-item" href="#">
                                            <svg class="text-danger" width="18px" height="18px"
                                                 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"
                                                 stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                                 stroke-linejoin="round">
                                                <polyline points="3 6 5 6 21 6"></polyline>
                                                <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
                                                <line x1="10" y1="11" x2="10" y2="17"></line>
                                                <line x1="14" y1="11" x2="14" y2="17"></line>
                                            </svg>
                                            <span class="w-100">Delete</span>
                                        </a>
                                    </li>
                                </ul>
                            </td>
                        </tr>
                    {% endfor %}
                    <!-- end item -->
                    </tbody>
                </table>

            </div>

            <!-- pagination, selected items -->
            <div class="row">
                {% block selectedItems %}
                    <div class="col py-3 text-center text-md-start">

                        <!-- selected items -->
                        <div class="d-grid d-md-inline-block dropup">
                            <a class="btn btn-sm btn-primary dropdown-toggle" href="#" role="button" id="ddSelected"
                               data-bs-toggle="dropdown" aria-expanded="false" data-bs-offset="0,0">
                      <span class="group-icon">
                        <svg height="18px" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="currentColor"><path
                                fill-rule="evenodd"
                                d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z"></path></svg>
                        <svg xmlns="http://www.w3.org/2000/svg" width="18px" height="18px" viewBox="0 0 24 24"
                             fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                             stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6"
                                                                                                      x2="18"
                                                                                                      y2="18"></line></svg>
                      </span>
                                <span>Selected items</span>
                            </a>

                            <ul class="dropdown-menu dropdown-menu-clean my-2" aria-labelledby="ddSelected">
                                <li>
                                    <a class="dropdown-item" href="#">
                                        <svg class="text-muted" width="18px" height="18px"
                                             xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"
                                             stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                             stroke-linejoin="round">
                                            <polyline points="20 6 9 17 4 12"></polyline>
                                        </svg>
                                        <span>Set active</span>
                                    </a>
                                </li>
                                <li>
                                    <a class="dropdown-item" href="#">
                                        <svg class="text-muted" width="18px" height="18px"
                                             xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"
                                             stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                             stroke-linejoin="round">
                                            <line x1="18" y1="6" x2="6" y2="18"></line>
                                            <line x1="6" y1="6" x2="18" y2="18"></line>
                                        </svg>
                                        <span>Set inactive</span>
                                    </a>
                                </li>
                                <li>
                                    <a class="dropdown-item" href="#">
                                        <svg class="text-muted" width="18px" height="18px"
                                             xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"
                                             stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                             stroke-linejoin="round">
                                            <circle cx="12" cy="12" r="10"></circle>
                                            <line x1="15" y1="9" x2="9" y2="15"></line>
                                            <line x1="9" y1="9" x2="15" y2="15"></line>
                                        </svg>
                                        <span>Set unavailable</span>
                                    </a>
                                </li>
                                <li>
                                    <a class="dropdown-item" href="#">
                                        <svg class="text-danger" width="18px" height="18px"
                                             xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"
                                             stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                             stroke-linejoin="round">
                                            <polyline points="3 6 5 6 21 6"></polyline>
                                            <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
                                            <line x1="10" y1="11" x2="10" y2="17"></line>
                                            <line x1="14" y1="11" x2="14" y2="17"></line>
                                        </svg>
                                        <span class="w-100">Delete</span>
                                    </a>
                                </li>
                            </ul>

                        </div>

                    </div>
                {% endblock %}

                {% block pagination %}
                    <div class="col-md-auto py-3">
                        {% include 'pagination.html' %}
                    </div>
                {% endblock %}
            </div>

        </div>
    </div>
{% endblock %}

